<template>
  <view class="container" v-if="info">
    <view class="header flex flex-ai-c">
      <view class="header-left">
        <i-icon
          :icon="statusIcon[info.status]"
          type="single"
          size="34rpx"
          color="#333"
        ></i-icon>
        <text class="header-left-text">{{ status[info.status] }}</text>
      </view>
      <view class="header-center" v-if="info.status === 0">截止付款时间：</view>
      <view class="header-right" v-if="info.status === 0">
        <u-count-down
          :timestamp="timestamp"
          separator-size="32"
          bg-color="transparent"
          separator-color="#333"
        ></u-count-down>
      </view>
    </view>
    <!-- 车型模块 -->
    <view class="carMolde boxS">
      <view class="boxS-content">
        <view class="content-item" :class="info.vin ? '' : 'b-b'">
          <view class="content-item-left">车型:</view>
          <view class="content-item-right shuanghang">{{ info.car_name }}</view>
        </view>
        <view class="content-item b-b" v-if="info.vin">
          <view class="content-item-left">VIN:</view>
          <view class="content-item-right">{{ info.vin }}</view>
        </view>
        <view class="xian"></view>
        <view class="content-item">
          <view class="content-item-left">询价主体:</view>
          <view class="content-item-right flex flex-ai-c">
            <text class="store">{{ info.store_buy_name }}</text>
            <i-icon
              class="icon-store"
              icon="iconmendianrenzheng"
              type="single"
              size="32rpx"
              color="#60C534"
            ></i-icon>
            <i-icon
              v-if="info.ispledge"
              class="icon-store"
              icon="iconbao_1"
              type="single"
              size="28rpx"
              color="#FBB000"
            ></i-icon>
          </view>
        </view>
        <view class="content-item">
          <view class="content-item-left">联系人:</view>
          <view class="content-item-right">{{ info.buy_name }}</view>
        </view>
        <view class="content-item">
          <view class="content-item-left">联系电话:</view>
          <view class="content-item-right">{{ info.buy_phone }}</view>
        </view>
        <view class="content-item">
          <view class="content-item-left">收货地址:</view>
          <view class="content-item-right">{{ info.buy_address }}</view>
        </view>
        <view class="content-item">
          <view class="content-item-left">询价时间:</view>
          <view class="content-item-right">{{
            dateFormat(info.question_time)
          }}</view>
        </view>
        <view class="content-item">
          <view class="content-item-left">发票需求:</view>
          <view class="content-item-right">{{
            info.is_need_invoice ? '需要发票' : '不需发票'
          }}</view>
        </view>
      </view>
    </view>

    <!-- 询价清单 -->
    <view
      class="enMolder-item boxS"
      v-for="(item, index) in info.snapshootlist"
      :key="index"
    >
      <view class="head" v-if="index === 0">询价清单</view>
      <view class="enMolder1 flex-jc-sb">
        <view class="en-left flex flex-ai-c">
          <view class="en-left-num">
            <view class="en-num">{{ index + 1 }}</view>
          </view>
          <view class="en-name">{{ item.parts_name }}</view>
        </view>
        <view class="en-right en-num">x{{ item.count }}</view>
      </view>
      <view class="enMolderImg" v-if="item.images">
        <image
          v-for="(img, i) in handleImg(item.images)"
          :src="img"
          :key="i"
        ></image>
      </view>
      <view class="enMolder3">
        <view class="en-left">说明:</view>
        <view class="en-right text-line2">{{ item.explain_text }}</view>
      </view>
      <view class="enMolder2 enMolder2-icon">
        <view class="en-left">品质:</view>
        <view class="en-right text-right">{{ quality[item.quality] }}</view>
      </view>
      <view class="enMolder2">
        <view class="en-left">商家报价:</view>
        <view class="en-right text-right price">{{ item.price }}元</view>
      </view>
      <view class="enMolder2">
        <view class="en-left">商家备注:</view>
        <view class="en-right">{{ item.remarks }}</view>
      </view>
    </view>

    <!-- 商家信息 -->
    <view class="boxS">
      <view class="boxS-head">商家信息</view>
      <view class="boxS-content">
        <view class="content-item flex flex-ai-c" @click="gotoStore">
          <text class="store-name">{{ info.store_sell_name }}</text>
          <i-icon
            class="icon-store"
            icon="iconmendianrenzheng"
            type="single"
            size="32rpx"
            color="#60C534"
          ></i-icon>
          <i-icon
            class="icon-store"
            icon="iconbao_1"
            type="single"
            size="28rpx"
            color="#FBB000"
          ></i-icon>
          <view class="flex-1 arr-right">
            <u-icon name="arrow-right" color="#9A9A9A" size="24rpx"></u-icon>
          </view>
        </view>
        <view class="content-item">
          <view class="content-item-left">联系人:</view>
          <view class="content-item-right flex flex-ai-c">
            <text class="user">{{ info.sell_name }}</text>
            <i-icon
              class="icon-store"
              icon="iconshenfenrenzheng"
              type="single"
              size="44rpx"
              color="#60C534"
            ></i-icon>
            <text>{{ info.sell_phone }}</text>
          </view>
        </view>
        <view class="content-item">
          <view class="content-item-left">地区:</view>
          <view class="content-item-right">{{ info.sell_address }}</view>
        </view>
        <view class="content-item">
          <view class="content-item-left">报价时间:</view>
          <view class="content-item-right">{{
            dateFormat(info.offer_time)
          }}</view>
        </view>
        <view class="content-item b-b">
          <view class="content-item-left">有效期:</view>
          <view class="content-item-right flex flex-jc-sb">
            <view>{{ dateFormat(info.effective_time) }}</view>
            <view v-if="info.status === 0">{{ remainder }}</view>
          </view>
        </view>
      </view>
      <view class="flex flex-jc-sa">
        <view class="merchant-footer-item flex flex-ai-c" @click="chat">
          <i-icon
            class="btn-icon"
            icon="iconxiaoxi1"
            type="multiple"
            size="34rpx"
            color="#333"
          ></i-icon>
          联系商家
        </view>
        <view class="merchant-footer-item flex flex-ai-c" @click="call">
          <i-icon
            class="btn-icon"
            icon="icondianhua"
            type="multiple"
            size="34rpx"
            color="#333"
          ></i-icon>
          致电商家
        </view>
      </view>
    </view>

    <!-- 其他信息 -->
    <view class="boxS">
      <view class="boxS-head">其他信息</view>
      <view class="boxS-content">
        <view class="content-item">
          <view class="content-item-left">运费价格:</view>
          <view class="content-item-right price">￥{{ info.freight }}</view>
        </view>
        <view class="content-item">
          <view class="content-item-left">发票:</view>
          <view class="content-item-right">{{
            info.is_need_invoice ? '需要发票' : '不需发票'
          }}</view>
        </view>
      </view>
    </view>

    <view class="boxS" v-if="false">
      <view class="boxS-head">其他信息</view>
      <view class="boxS-content">
        <view class="content-item">
          <view class="content-item-left">报价人:</view>
          <view class="content-item-right"
            >{{ info.buy_name }} {{ info.buy_phone }}</view
          >
        </view>
        <view class="content-item">
          <view class="content-item-left">运费价格:</view>
          <view class="content-item-right price">￥{{ info.freight }}</view>
        </view>
        <view class="content-item">
          <view class="content-item-left">发票:</view>
          <view class="content-item-right">{{
            info.is_need_invoice ? '需要发票' : '不需发票'
          }}</view>
        </view>
      </view>
    </view>

    <!-- 物流信息 -->
    <view class="boxS" v-if="info.status === 20 || info.status === 30">
      <view class="logistics-head boxS-head">物流信息</view>
      <view class="boxS-content">
        <view class="content-item">
          <view class="content-item-left"
            >{{ info.logistics_company_name }}:</view
          >
          <view class="content-item-right" @click="copy(info.logistics_no)">
            <text>{{ info.logistics_no }}</text>
            <text class="copy">复制</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 订单信息 -->
    <view class="boxS">
      <view class="boxS-head"> 订单信息 </view>
      <view class="boxS-content">
        <view class="content-item">
          <view class="content-item-left">订单编号：</view>
          <view class="content-item-right" @click="copy(info.order_no)">
            <text>{{ info.order_no }}</text>
            <text class="copy">复制</text>
          </view>
        </view>
        <view class="content-item">
          <view class="content-item-left">创建时间：</view>
          <view class="content-item-right">{{ dateFormat(info.addtime) }}</view>
        </view>
        <view
          class="content-item"
          v-if="info.status !== 0 && info.status !== 5"
        >
          <view class="content-item-left">付款时间：</view>
          <view class="content-item-right">{{
            dateFormat(info.pay_time)
          }}</view>
        </view>
        <view class="content-item" v-if="info.status == 5">
          <view class="content-item-left">取消时间：</view>
          <view class="content-item-right">{{
            dateFormat(info.cancel_time)
          }}</view>
        </view>
        <view class="content-item" v-if="info.status === 20">
          <view class="content-item-left">发货时间：</view>
          <view class="content-item-right">{{
            dateFormat(info.depart_time)
          }}</view>
        </view>
        <view class="content-item" v-if="info.status === 30">
          <view class="content-item-left">成交时间：</view>
          <view class="content-item-right">{{
            dateFormat(info.accomplish_time)
          }}</view>
        </view>
      </view>
    </view>

    <!--按钮-->
    <view class="btn-wrap flex flex-ai-c" v-if="info.status === 0">
      <view class="btn-price">
        合计报价：
        <text class="price">￥{{ info.total_money }}</text>
      </view>
      <view class="btn flex">
        <button class="btn-left-price" @click="handleOrder('cancel')">
          <text>取消订单</text>
        </button>
        <button class="btn-right-price" @click="gotoPay">
          <text class="btn-right-text">去付款</text>
        </button>
      </view>
    </view>
    <view
      class="btn-wrap flex"
      v-else-if="info.status === 5 || info.status === 10"
    >
      <button class="cancel-left" @click="chat">
        <i-icon
          icon="iconxiaoxi"
          type="single"
          size="32rpx"
          color="#FFE23E"
        ></i-icon>
        <text class="btn-left-text">联系商家</text>
      </button>
      <button class="btn-right" @click="call">
        <i-icon
          icon="iconlianxi"
          type="single"
          size="32rpx"
          color="#333"
        ></i-icon>
        <text class="btn-right-text">致电商家</text>
      </button>
    </view>
    <view class="btn-wrap flex" v-else-if="info.status === 20">
      <button class="btn-100 bg-orange" @click="handleOrder('getGoods')">
        <text class="btn-right-text">确认收货</text>
      </button>
    </view>
    <view class="btn-wrap flex" v-else-if="info.status === 30">
      <view
        class="btn-left btn flex flex-dir-c flex-jc-c flex-ai-c"
        @click="handleOrder('del')"
      >
        <i-icon
          icon="iconshanchu"
          type="single"
          size="34rpx"
          color="#FFE23E"
        ></i-icon>
        <text>删除订单</text>
      </view>
      <view
        class="btn-center btn flex flex-dir-c flex-jc-c flex-ai-c"
        @click="chat"
      >
        <i-icon
          icon="iconxiaoxi"
          type="single"
          size="34rpx"
          color="#FFE23E"
        ></i-icon>
        <text>联系商家</text>
      </view>
      <button class="btn-right" @click="call">
        <i-icon
          icon="iconlianxi"
          type="single"
          size="32rpx"
          color="#333"
        ></i-icon>
        <text class="btn-right-text">电话咨询</text>
      </button>
    </view>

    <!--弹窗-->
    <u-modal
      title="温馨提示"
      v-model="popup.show"
      class="popup"
      width="65%"
      :mask-close-able="true"
      :title-style="{ fontWeight: 'bold', fontSize: '36rpx', color: '#333333' }"
      :show-confirm-button="false"
    >
      <view class="slot-content">
        {{ popup.title }}
      </view>
      <view class="woxiangxbox">
        <button
          class="slot-contentbutto2"
          @click="popup.show = false"
          form-type="reset"
        >
          取 消
        </button>
        <button class="slot-contentbutto" @click="popupFn" form-type="reset">
          {{ popup.btnText }}
        </button>
      </view>
    </u-modal>
  </view>
</template>

<script src="./inquiryOrderDetail.js"></script>
<style lang="scss" src="./inquiryOrderDetail.scss"></style>
